<template>
	<view class="share-content">
		<!-- 顶部扫一扫、搜索栏和消息 start -->
		<view class="top-bar">
			<view class="scan-icon" @click="goUnder">
				<image lazy-load="true"  src="../../static/images/icon-1.png" class="ico"></image>
				<view class="text">线下门店</view>
			</view>
			<view class="search-input">
				<image lazy-load="true"  src="../../static/images/search-ico.png" class="search-ico"></image>
				<input type="text" placeholder="搜笔记" confirm-type="search" v-model="keywords" @confirm="getKey" placeholder-style="color:#808080">
				<image lazy-load="true" v-if="keywords" @click="cleanInput()" src="../../static/images/close-btn.png" class="close-btn"></image>
			</view>
			
			<view class="message-icon" @click="goNew">
				<image lazy-load="true"  src="../../static/images/message-ico.png" class="ico"></image>
				<view class="text">消息</view>
				<view v-if="show_notice" class="badge_d" ></view>
			</view>
		</view>
		<!-- 搜索关键词 start -->
		<view class="key-word-box" style="display: none;">
			<view class="key-word">
				<view v-for="(item,key) in  note_tags" :key="key" @click="goSearch(item)">{{item}}</view>
			</view>
		</view>
		<!-- 分享文章列表 -->
		<view class="share-article">
			<view class="article-list" >							
				<view class="article" v-for="(item,key) in note_lists" @click="goDetails(item.id)" :key="key" v-if="key % 2 == 0">
					<view class="article-img">
						<image lazy-load="true"  mode="widthFix" :src="item.thumbnail[0]" class="article-img"></image>
					</view>
					<view class="title">{{item.title}}</view>
					<view class="author">
						<view class="author-info">
							<view class="ico"><image lazy-load="true"   :src="item.user.base_avatar" class="ico"></image></view>
							<view class="name">{{item.user.base_nickname}}</view>
						</view>
					</view>
					<view class="info">
						<view class="good"><view>点赞</view><view class="good-num">{{item.like_count}}</view></view>
						<view class="discuss"><view>评论</view><view class="discuss-num">{{item.comment_count}}</view></view>
						<view class="see"><view>浏览</view><view class="see-num">{{item.scan_count}}</view></view>						
					</view>	
				</view>
					
			</view>
			<view class="article-list" >
				<view class="article" v-for="(item,key) in note_lists" @click="goDetails(item.id)" :key="key"  v-if="key % 2 == 1">
					<view class="article-img">
						<image lazy-load="true" mode="widthFix" :src="item.thumbnail[0]" class="article-img"></image>
					</view>
					<view class="title">{{item.title}}</view>
					<view class="author">
						<view class="author-info">
							<view class="ico"><image lazy-load="true"  :src="item.user.base_avatar" class="ico"></image></view>
							<view class="name">{{item.user.base_nickname}}</view>
						</view>
					</view>
					<view class="info">
						<view class="good"><view>点赞</view><view class="good-num">{{item.like_count}}</view></view>
						<view class="discuss"><view>评论</view><view class="discuss-num">{{item.comment_count}}</view></view>
						<view class="see"><view>浏览</view><view class="see-num">{{item.scan_count}}</view></view>						
					</view>	
				</view>
					
			</view>
		</view>
		<view class="write-box" v-if="is_show_btn">
			<image lazy-load="true"  src="../../static/images/write.png" @click="goPost()" class="write"></image>
		</view>
	</view>
</template>

<script>	
	export default {
		data() {
			return {
				titleTabNum:'1',
				keywords:'',
				p:1,
				per:10,
				store_sku_id:'',
				note_lists:[],
				is_bottom:false,
				clearBtn:false,
				note_tags:[],
				show_notice:0,
				is_show_btn:true
			}
		},
		onLoad(e) {
			this.store_sku_id = e.id
		},
		onShow() {
			var self = this;
			self.show_notice = parseInt(uni.getStorageSync('notice'));
			this.$request.request({
				url:'/search/note_tags',
				success:function(res){
					if(res.code==200){
						var x = res.result;
						self.note_tags = x
					}else{
						
					}
				}
			});
			this.$request.request_config({
				url:'/display_config',
				success:function(res){
					if(res.code==200){
						if(res.result.button){
							self.is_show_btn = res.result.button.note_write
						}
					}
				}
			});
			this.keywords = '';
			this.note_lists=[];
			this.p = 1;
			this.note_list();
			this.clearBtn = false;
			
			// #ifdef H5
			let share_time_line={
				title:self.$request.h5_share_name, // 分享标题
				link: self.$request.h5_share_url+'?page=index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
			}
			let share_app_message={
				title: self.$request.h5_share_name, // 分享标题
				desc: '我发现了一个很不错的商城，买家具有超大实惠！', // 分享描述
				link: self.$request.h5_share_url+'?page=index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
			}
			uni.setStorageSync('share_time_line',share_time_line);
			uni.setStorageSync('share_app_message',share_app_message);
			self.$request.wx_config()
			// #endif
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {
		      console.log(res.target)
		    }
		    return {
		      title: this.$request.share_title,
		      path: '/pages/index/index'
		    }
		  },
		methods: {
			setActive(num){
				this.titleTabNum = num;
			},
			goSearch(val){
				this.keywords=val;
				this.note_lists=[];
				this.p=1;
				this.note_list();
				this.clearBtn = true
			},
			cleanInput(){
				this.keywords = '';
				this.note_lists=[];
				this.p = 1;
				this.note_list();
				this.clearBtn = false;
			},
			getKey(e){
				this.keywords=e.detail.value;
				this.note_lists=[];
				this.p=1;
				this.note_list();
				if(this.keywords){
					this.clearBtn = true
				}
			},
			onReachBottom(){
				if(this.is_bottom) return;
				this.is_bottom = true;
				this.p++;
				this.note_list();
			},
			scan_code(){
				var self = this;
				uni.scanCode({
				    success: function (res) {
						var index = res.result.indexOf(self.$request.share_url);
						if(index === 0){
							uni.redirectTo({
								url:'../redirect/redirect?q='+encodeURIComponent(res.result)
							})
						}else{
							uni.showToast({
								title:'暂无该内容',
								duration:1000,
								icon:'none'
							})
						}
				    }
				});
			},
			note_list(){
				var self=this;
				this.$request.request({
					url:'/note/search',
					data:{
						keywords:this.keywords,
						store_sku_id:this.store_sku_id,
						p:this.p,
						per:this.per
					},
					success:function(res){
						if(res.code==200){
							var x = res.result;
							for(var i=0;i<x.length;i++){
								x[i].thumbnail.forEach((item,index)=>{
									x[i].thumbnail[index] =self.$http_img(item);
								});
							}
							self.note_lists =self.note_lists.concat(x);
							self.is_bottom = false;
						}else{
							
						}
					}
				})
			},
			goDetails(id){
				uni.navigateTo({
				    url: '../share-details/share-details?id='+id
				});
			},
			goNew(){
				uni.navigateTo({
				    url: '../news/news'
				});
			},
			goPost(){
				uni.navigateTo({
				    url: '../post/post'
				});
			}
			
		},
		components: {

		}
	}
</script>

<style>
	@import url("all-goods-notes.css");
</style>
